<template>
  <a-modal
    :title="form && form.id ? '修改申请' : '新建申请'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="work_overtime_time" label="加班时间" prop="work_overtime_time">
          <a-date-picker show-time class="full" :disabled="disabled"  v-model="form.work_overtime_time" placeholder="请选择加班时间"/>
        </a-form-model-item>
        <a-form-model-item ref="duration" label="加班时长" prop="duration">
          <a-input :disabled="disabled" placeholder="请输入加班时长（单位：小时）" v-model="form.duration"/>
        </a-form-model-item>
        <a-form-model-item ref="reason" label="加班原因" prop="reason">
          <a-textarea placeholder="请输入加班原因" :rows="6"  :disabled="disabled"  v-model="form.reason"/>
        </a-form-model-item>
        <a-form-model-item ref="refuseReason" label="拒绝原因" prop="refuseReason" v-if="form.approval_status === '2'">
          <a-textarea :rows="6"  :disabled="disabled"  v-model="form.refuseReason"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div class="modal-footer" slot="footer">
      <a-button @click="() => { $emit('cancel') }">
        取消
      </a-button>
      <template v-if="(!form.order_status || form.order_status === '1' || form.order_status === '3') && !disabled">
        <a-button ghost type="danger" @click="handleOk('1')">
          暂存
        </a-button>
        <a-button type="primary" @click="handleOk('2')">
          提交
        </a-button>
      </template>
    </div>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      form: {
        id: undefined,
        work_overtime_time: undefined,
        duration: undefined,
        reason: undefined,
        refuseReason: undefined,
      },
      disabled: false,
      rules: {
        work_overtime_time: [
          { required: true, message: '请选择加班时间', trigger: 'change' },
        ],
        duration: [
          { required: true, message: '请输入加班时长', trigger: 'blur' },
        ],
        reason: [
          { required: true, message: '请输入加班原因', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
    })
  },
  methods: {
    handleOk(tag) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.order_status = tag;
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        id: undefined,
        work_overtime_time: undefined,
        duration: undefined,
        reason: undefined,
        refuseReason: undefined,
      };
    },
  }
}
</script>
